<template>
    <div class='container'>
        <el-dialog title="预览文章" :visible.sync="dialogVisible" width="50%">
            <h2>{{article.title}}</h2>
            <span>{{article.createTime | formatDate}}</span>&nbsp;&nbsp;
            <span>{{article.username}}</span>&nbsp;&nbsp;&nbsp;
            <span class="el-icon-view"></span>&nbsp;&nbsp;&nbsp;
            <span>{{article.visits}}</span>
            <div class="box" v-html="article.articleBody"></div>
        </el-dialog>
    </div>
</template>

<script>
    // 导入文章详情接口
    import {
        detail
    } from "@/api/hmmm/articles.js";
    // 导入moment处理时间
    import moment from "moment";
    export default {
        data() {
            return {
                dialogVisible: false, // 控制弹框是否显示
                article: {
                    title: "", // 标题
                    createTime: null, // 时间
                    username: "", // 用户名
                    visits: null, // 访问量
                    articleBody: "" // 内容
                }
            };
        },
        methods: {
            // 弹层显示
            dialogFromShow() {
                this.dialogVisible = true;
            },
            // 弹层隐藏
            dialogFromHidden() {
                this.dialogVisible = false;
            },
            // 获取文章详情
            getDetail(row) {
                detail(row).then(res => {
                    // console.log(res);
                    this.article = res.data;
                });
            }
        },
        // 过滤器处理时间
        filters: {
            formatDate: function (time) {
                return moment(time).format("YYYY-MM-DD  hh:mm:ss");
            }
        }
    };
</script>

<style lang="scss" scoped>
    .box {
        background-color: #f5f5f5;
        margin: 10px 0;
        padding: 20px 10px;
        border-top: 1px dashed #ccc;
        overflow: hidden;
        width: 100%;
    }
</style>